<template>
  <el-input
    :value="value"
    :size="size"
    :resize="resize"
    :form="form"
    :disabled="disabled"
    :readonly="readonly"
    :type="type"
    :autosize="autosize"
    :autocomplete="autocomplete"
    :validateEvent="validateEvent"
    :suffixIcon="suffixIcon"
    :prefixIcon="prefixIcon"
    :label="label"
    :clearable="clearable"
    :showPassword="showPassword"
    :showWordLimit="showWordLimit"
    :tabindex="tabindex"
    @input="input"
    @blur="blur"
    @change="change"
    @clear="clear"
    @focus="focus"
  >
    <template #prefix>
      <slot name="prefix"></slot>
    </template>
    <template #suffix>
      <slot name="suffix"></slot>
    </template>
    <template #prepend>
      <slot name="prepend"></slot>
    </template>
    <template #append>
      <slot name="append"></slot>
    </template>
  </el-input>
</template>

<script>
export default {
  props: {
    value: [String, Number],
    size: String,
    resize: String,
    form: String,
    disabled: Boolean,
    readonly: Boolean,
    type: {
      type: String,
      default: 'text'
    },
    autosize: {
      type: [Boolean, Object],
      default: false
    },
    autocomplete: {
      type: String,
      default: 'off'
    },
    validateEvent: {
      type: Boolean,
      default: true
    },
    suffixIcon: String,
    prefixIcon: String,
    label: String,
    clearable: {
      type: Boolean,
      default: false
    },
    showPassword: {
      type: Boolean,
      default: false
    },
    showWordLimit: {
      type: Boolean,
      default: false
    },
    tabindex: String
  },
  methods: {
    input(value) {
      this.$emit('input', value);
    },
    blur(event) {
      this.$emit('blur', event);
    },
    focus(event) {
      this.$emit('focus', event);
    },
    clear(event) {
      this.$emit('clear', event);
    },
    change(event) {
      this.$emit('change', event);
    }
  }
}
</script>

<style>

</style>
